<template>
  <div class="panel-main">
    <div class="panel-row">
      <div>标题：</div>
      <Input :value="model?.label" class="panel-input" @change="change($event, 'label')"/>
    </div>
    <div class="panel-row">
      <div>所属车间：</div>
      <Select :value="model?.workshop" @change="change($event, 'workshop', 'select')">
        <SelectOption v-for="(item,index) in workshops" :key="index" :value="item.code">{{item.name}}</SelectOption>
      </Select>
    </div>
    <div class="panel-row">
      <div class="panel-sub-row">
         <span>宽度：</span>
        <Input :value="width" class="panel-input" @change="change($event, 'width')"/>
      </div>
      <div class="panel-sub-row">
         <span>高度：</span>
         <Input :value="height" class="panel-input"  @change="change($event, 'height')"/>
      </div>
    </div>
    <div class="panel-row">
      <div>位置：</div>
      <div class="panel-sub-row">
        <span>X:</span>
        <Input :value="model?.x" class="panel-input" @change="change($event, 'x')"/>
      </div>
      <div class="panel-sub-row">
         <span>Y：</span>
         <Input :value="model?.y" class="panel-input"  @change="change($event, 'y')"/>
      </div>
    </div>
    <div class="panel-row">
      <div>所在区域：</div>
      <Select :value="model?.zone" @change="change($event, 'zone', 'select')">
        <SelectOption v-for="(item,index) in zones" :key="index" :value="item.code">{{item.name}}</SelectOption>
      </Select>
    </div>
    <div class="panel-row">
      <div class="panel-sub-row">
         <span>站点点位：</span>
        <Input :value="model?.location" class="panel-input" @change="change($event, 'location')"/>
      </div>
      <div class="panel-sub-row">
         <span>流向位置编码：</span>
        <Input :value="model?.locationWcCode" class="panel-input" @change="change($event, 'locationWcCode')"/>
      </div>
    </div>
    <div class="panel-row">
      <div class="panel-sub-row">
         <span>站点区域：</span>
        <Input :value="model?.locationArea" class="panel-input" @change="change($event, 'locationArea')"/>
      </div>
      <div class="panel-sub-row">
        <span>是否锁定：</span>
        <Select :value="model?.locationLock" @change="change($event, 'locationLock', 'select')">
          <SelectOption v-for="(item,index) in locks" :key="index" :value="item.code">{{item.name}}</SelectOption>
        </Select>
      </div>
    </div>
    <div class="panel-row">
      <div class="panel-sub-row">
         <span>托盘层数：</span>
        <Input :value="model?.currentStratum" class="panel-input" @change="change($event, 'width')"/>
      </div>
      <div class="panel-sub-row">
         <span>当前高度：</span>
        <Input :value="model?.locationHeight" class="panel-input" @change="change($event, 'width')"/>
      </div>
    </div>
    <div class="panel-row">
      <div class="panel-sub-row">
        <span>承载托盘类型：</span>
        <Select :value="model?.containerType" @change="change($event, 'containerType', 'select')">
          <SelectOption v-for="(item,index) in containerTypes" :key="index" :value="item.code">{{item.name}}</SelectOption>
        </Select>
      </div>
      <div class="panel-sub-row">
        <div>颜色：</div>
        <Input :value="model?.color" class="panel-input" type="color"  @change="change($event, 'color')"/>
      </div>
    </div>
  </div>
</template>
<script>
import {Input, Select, SelectOption} from "ant-design-vue";
import {Dictionary} from "../../../utils/Dictionary";

export default {
  name: 'App',
  props: {
    selectedShape: Object
  },

  computed: {
    isDictionary() {
      return this.$store.state.dictionary;
    }
  },
  watch: {
    selectedShape: {
      handler: function (shape) {
        const item = shape.graph?.findById(shape.itemId);
          this.model = item?.getModel();
          this.width = this.model?.size[0];
          this.height = this.model?.size[1];
      },
      deep: true
    },
    isDictionary(data) {
      this._initWorkshop(data);
    }
  },

  components: {
    Input,
    Select,
    SelectOption
  },

  data(){
    return {
      model: {},
      width: '',
      height: '',
      workshops: []
    }
  },

  mounted() {
    this._initWorkshop(this.$store.state.dictionary);
  },

  methods: {
    change(e, key, type){
      switch (type){
        case 'input': this.setValue(e.target.value, key); break;
        case 'checkbox':  this.setValue(e.target.checked, key); break;
        case 'select':
            this.setValue(e, key);
            break;
        default:
            this.setValue(e.target.value, key);
            break;
      }
      const item = this.selectedShape.graph.findById(this.selectedShape.itemId);
      this.$emit('change', item.getModel());
    },

    setValue(value, key){
      if(key === 'width' || key === 'height'){
        this[key] = value;
        this.model.size[key === 'width' ? 0 : 1] = parseInt(value);
      }else{
        this.model[key] = value
      }
    },
    /// 加载库位
    _initWorkshop(data){
      this.workshops = data.filter(item => item.code === Dictionary.WORKSHOP)
                    .map(item => item.children)[0];

      this.zones = data.filter(item => item.code === Dictionary.LOCATION_ZONE).
        map(item => item.children)[0];
      this.locks = data.filter(item => item.code === Dictionary.LOCATION_LOCK_STATUS).
        map(item => item.children)[0];
      this.containerTypes = data.filter(item => item.code === Dictionary.CONTAINER_TYPE).
        map(item => item.children)[0];

    }
  }
}
</script>
<style scoped lang="scss">

</style>